<template>
  <div class="container">
    <template>
      <!-- v-for="(item, index) in accountRecharges" -->
      <a-badge :number-style="{ backgroundColor: '#52c41a' }" count="第一页">
        <!-- :key="index"
        :value="`第 ${index + 1} 张`" -->
        <span>发票所属时间: {{ NewTime }}</span>

        <table align="center" bgcolor="#ccc" border="0" cellpadding="10" cellspacing="1" class="tabtop13" width="100%">
          <!-- :key="index" -->
          <tr>
            <td class="font-center" colspan="1" width="20%">{{DataEntity.InvoiceType}}</td>
            <td class="font-center" colspan="4" width="20%"></td>
            <td class="font-center titfont" colspan="4" width="100%">发票版面 | 一百万元版</td>
          </tr>
          <tr>
            <td colspan="1">客户</td>
            <td colspan="4">{{DataEntity.MerchantName}}</td>
            <td colspan="2">服务商</td>
            <td colspan="2">{{DataEntity.ServiceProviderName}}</td>
          </tr>
          <tr>
            <td width="5%">货物或应税劳务、服务名称</td>
            <td width="5%">规格</td>
            <td width="5%">单位</td>
            <td width="5%">数量</td>
            <td width="5%">单价</td>
            <td width="5%">金额</td>
            <td width="5%">税率</td>
            <td width="5%">税额</td>
            <td width="20%">含税金额(最大值:1059998)</td>
          </tr>
          <tr>
            <td>{{DataEntity.ServiceProviderName}}</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td>{{DataEntity.Amount}}</td>
            <td>13%</td>
            <td>{{DataEntity.TaxAmount}}</td>
            <td>
              {{DataEntity.TaxAmount}}
              <!-- :model="item" -->
            </td>
          </tr>
          <tr>
            <td>价税合计</td>
            <td colspan="8">{{DataEntity.InvoiceTaxAmount}}</td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="8">
              <a-textarea allow-clear />
            </td>
          </tr>
        </table>
      </a-badge>
    </template>

    <div style="margin-top: 20px">
      <p>
        可开票总额:{{InvoiceCanTotal}}
        <b>￥</b>
      </p>
      <p>
        申请开票总额:{{InvoiceTotal}}
        <b>￥</b>
      </p>
      <div style="text-align: right">
        <a-button @click="$router.replace(`/Base_leasesystem_invoicedetail/leasesystem_invoicedetail/List`)" type="info"
          >取消</a-button
        >
        <a-button style="margin-left: 10px" type="primary" @click="submit">确定 </a-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      InvoiceTotal:"",
      InvoiceCanTotal:"",
      NewTime: '',
      DataEntity:{},
      Id:""
    }
  },
    computed: {
    // InvoiceCanTotal() {
    //   return this.DataEntity.reduce(
    //     (total, cur) => total + cur.InvoiceTaxAmount,
    //     0
    //   );
    // },
  },
  mounted() {
    console.log(this.$route.query.id)
    this.Id = this.$route.query.id
    this.firstflush(this.$route.query.id);
    let nowDate = new Date()
    let date = {
      year: nowDate.getFullYear(),
      month: nowDate.getMonth() + 1,
      date: nowDate.getDate(),
    }
    this.NewTime = date.year + '-' + date.month + '-' + date.date

    // this.InvoiceTotal = this.DataEntity.reduce(
    //     (total, cur) => total + cur.InvoiceTaxAmount,
    //     0
    //   );
  },
  methods: {
    async firstflush(id){
      this.$http.post("/Base_leasesystem_invoicedetail/leasesystem_invoicedetail/GetTheData",{ id: id })
      .then(res=>{
        this.DataEntity = res.Data
        console.log(res)
      })
    },
    submit() {
      this.$router.push({ path: '/Base_leasesystem_invoicedetail/leasesystem_invoicedetail/invoiceendinfo',query: {
            id: this.Id
        }  })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  padding: 0 5rem;
  display: flex;
  flex-direction: column;
  .invoice-operation {
    padding: 2rem 0;
    //margin: 1rem;
    width: 100%;
  }
}

/* CSS Document */
.tabtop13 {
  margin-top: 13px;

  display: table;
  border-collapse: separate;

  text-indent: initial;
  // border-spacing: 2px;
  border-color: #c87c35 !important;
  border-top-color: #c87c35;
  border-right-color: #c87c35;
  border-bottom-color: #c87c35;
  border-left-color: #c87c35;

  td {
    background-color: #ffffff;
    height: 25px;
    line-height: 150%;
    text-align: center;
  }
}
.font-center {
  text-align: center;
}
.btbg {
  background: #e9faff !important;
}

.title {
  font-family: 微软雅黑;
  font-size: 26px;
  font-weight: bold;
  border-bottom: 1px dashed #c87c35;
  color: #255e95;
}
.titfont {
  font-family: 微软雅黑;
  font-size: 16px;
  font-weight: bold;
  color: #255e95;
  background-color: #e9faff;
}
</style>
